<template>
	<el-tabs v-model="activeName" class="do-tabs">
		<el-tab-pane label="基本信息" name="first">
			<el-form ref="patientFormRef" style="margin-top: 6px;" :model="patientForm" :rules="loginRules" >
				<div class="divtext">
					<div class="divinfo">患者信息</div>
					<div class="divline-btn">
						<el-form-item class="divline-button-left">
							<el-button type="primary" @click="submitHandle()">确定</el-button>
						</el-form-item>
						<el-form-item class="divline-button-right">
							<el-button type="primary" @click="clearform()">取消</el-button>
						</el-form-item>
					</div>
				</div>
				<div class="divhr"></div>
				<div class="divline">
					<el-form-item prop="username" class="divlineleft" label="姓名：">
						<el-input v-model="patientForm.userName" @click="addPatientHandle()"></el-input>
					</el-form-item>
					<el-form-item prop="usersex" class="divlineleft" label="性别：">
						<el-select v-model="patientForm.userSex">
							<el-option
							v-for="item in patientForm.sexlist"
							:key="item.value"
							:label="item.label"
							:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-form-item prop="userbirthday" class="divlineleft" label="出生日期：">
						<el-date-picker
							v-model="patientForm.userBirthday"
							type="datetime"
						/>
					</el-form-item>
					<el-form-item prop="userage" class="divlineleft" label="年龄：">
						<el-input v-model="patientForm.userAge"></el-input>
					</el-form-item>
				</div>
				<div class="divline">
					<el-form-item prop="usercard" class="divlineleft" label="身份证号：">
						<el-input v-model="patientForm.userCard"></el-input>
					</el-form-item>
					<el-form-item prop="socialnum" class="divlineleft" label="社保卡号：">
						<el-input v-model="patientForm.socialNum"></el-input>
					</el-form-item>
					<el-form-item prop="patienttype" class="divlineleft" label="患者类型：">
						<el-select v-model="patientForm.patientType">
							<el-option
							v-for="item in patientForm.patientlist"
							:key="item.value"
							:label="item.label"
							:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-form-item prop="visitnum" class="divlineleft" label="就诊卡号：">
						<el-input v-model="patientForm.visitNum"></el-input>
					</el-form-item>
				</div>
				<div class="divline">
					<el-form-item prop="usertel" class="divlineleft" label="联系电话：">
						<el-input v-model="patientForm.userTel"></el-input>
					</el-form-item>
					<el-form-item prop="doctorName" class="divlineleft" label="诊断医生：">
						<el-input v-model="patientForm.doctorName" @click="addUserHandle()"></el-input>
					</el-form-item>
					<el-form-item prop="useraddr" class="divlinecol" label="详细地址：">
						<el-input v-model="patientForm.userAddr"></el-input>
					</el-form-item>
				</div>
			</el-form>
				<div style="width:91%;height:300px;float:left; margin-top: 20px;margin-left: 10px;
			margin-bottom: 100px;">
					<WangEditor v-model="patientForm.remark" placeholder="请输入..."></WangEditor>
				</div>
		</el-tab-pane>
		<el-tab-pane label="处方信息" name="second">
			<div class="menuline">
				<el-form-item class="menuleft">
					<el-button v-auth="'sys:post:save'" type="primary" @click="addGoodHandle()">添加药品</el-button>
					<el-button  type="primary" @click="submitDrug()">保存</el-button>
				</el-form-item>
			</div>
			<el-table :data="patientForm.dataList" border style="width: 100%">
				<el-table-column label="序号" type="index" width="60"></el-table-column>
				<el-table-column prop="goodName" label="药品名称" header-align="center" align="center"></el-table-column>
				<el-table-column prop="goodSpec" label="药品规格" header-align="center" align="center"></el-table-column>
				<el-table-column prop="goodCount" label="商品数量" header-align="center" align="center">
					<template #default="scope">
						<el-input @change="changePrice(scope.row)"
							v-model="scope.row.goodCount"
						></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="goodSource" label="药品厂家" header-align="center" align="center"></el-table-column>
				<el-table-column prop="goodPrice" label="药品进价" header-align="center" align="center"></el-table-column>
				<el-table-column prop="salePrice" label="销售价格" header-align="center" align="center"></el-table-column>
				<el-table-column prop="goodUnit" label="药品单位" header-align="center" align="center"></el-table-column>
				<el-table-column prop="goodTime" label="生产日期" header-align="center" align="center"></el-table-column>
				<el-table-column prop="timeArea" label="有效期" header-align="center" align="center"></el-table-column>
				<el-table-column prop="totalPrice" label="合计价格" header-align="center" align="center"></el-table-column>
			</el-table>
			<div class="menuline" style="margin-top: 10%;">
				<el-form-item class="menuleft">
					<el-button v-auth="'sys:post:save'" type="primary" @click="addProjectHandle()">添加项目</el-button>
					<el-button  type="primary" @click="submitProject()">保存</el-button>
				</el-form-item>
			</div>
			<el-table :data="patientForm.projectList" border style="width: 100%">
				<el-table-column label="序号" type="index" width="60"></el-table-column>
				<el-table-column prop="projectCode" label="项目编码" header-align="center" align="center"></el-table-column>
				<el-table-column prop="projectName" label="项目名称" header-align="center" align="center"></el-table-column>
				<el-table-column prop="projectPrice" label="价格" header-align="center" align="center"></el-table-column>
			</el-table>
		</el-tab-pane>
  	</el-tabs>
	<!-- 弹窗, 新增 / 修改 -->
	<listUser ref="listUserRef" @fatherUserMethod="fatherUserMethod"></listUser>
	<!-- 弹窗, 新增 / 修改 -->
	<patientlistMsg ref="patientRef" @fatherPatientMethod="fatherPatientMethod"></patientlistMsg>
	<!-- 弹窗, 新增 / 修改 -->
	<goodlistMsg ref="goodRef" @fatherGoodMethod="fatherGoodMethod"></goodlistMsg>
	<!-- 弹窗, 新增 / 修改 -->
	<projectlistMsg ref="projectRef" @fatherProjectMethod="fatherProjectMethod"></projectlistMsg>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { User, Key,House,Setting } from '@element-plus/icons-vue'
import store from '@/store'
import {usePatientRecordSubmitApi} from '@/api/sys/patientrecord'
import {usePatientDrugSubmitApi} from '@/api/sys/patientdrug'
import {usePatientProjectSubmitApi} from '@/api/sys/patientproject'
import {useUserSaveApi } from '@/api/sys/user'
import { useSendCodeApi } from '@/api/auth'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { validateMobile } from '@/utils/validate'
import { ElMessage } from 'element-plus'
import patientlistMsg from './patientuser.vue'
import goodlistMsg from './goodlist.vue'
import projectlistMsg from './projectlist.vue'
import listUser from './userlist.vue'
import WangEditor from '@/components/wang-editor/index.vue'
const router = useRouter()
const { t } = useI18n()
const patientFormRef = ref()
const activeName = ref('first')
const patientForm = reactive({
	id:"",
	uid:"",
	patientId:'',
	userName:'',//姓名
	userSex:'',//性别
	userBirthday:'',//出生日期
	userAge:'',//年龄
	userCard:'',//身份证号
	socialNum:'',//社保卡号
	patientType:'',//患者类型
	visitNum:'',//就诊卡号
	userTel:'',//联系电话
	userAddr:'',//详细地址
	registerDept:'',//挂号科室
	outpatientType:'',//门诊类型
	seeDoctor:'',//接诊医生
	costMoney:'',//挂号费
	viewState:'',//就诊状态
	startCase:'',//初步诊断
	orgId:'',//组织id,
	doctorId:'',
	doctorName:'',
	remark:'',
	status:1,
	typelist:[
		{
			value: '普通门诊',
    		label: '普通门诊',
		},
		{
			value: '急诊',
    		label: '急诊',
		},
		{
			value: '专家门诊',
    		label: '专家门诊',
		},
		{
			value: '免费门诊',
    		label: '免费门诊',
		}
	],
	sexlist:[
		{ 
			value: '男',
    		label: '男',
		},
		{ 
			value: '女',
    		label: '女',
		}
	],
	patientlist:[
		{ 
			value: '自费',
    		label: '自费',
		},
		{ 
			value: '医保',
    		label: '医保',
		}
	],
	statelist:[
		{ 
			value: '一般',
    		label: '一般',
		},
		{ 
			value: '急',
    		label: '急',
		},
		{ 
			value: '危',
    		label: '危',
		},
		{ 
			value: '其他',
    		label: '其他',
		}
	],
	dataList:[
		{
			parentId:"",
			goodId:"",
			goodName:"",
			goodType:"",
			goodSource:"",
			goodSpec:"",
			goodTime:"",
			timeArea:"",
			goodCount:"",
			goodUnit:"",
			orgId:"",
			goodPrice:"",
			salePrice:"",
			totalPrice:"",
			patientStatus:2,
		}
	],
	projectList:[
		{
			projectId:"",
			projectCode:"",
			projectName:"",
			projectPrice:0,
			orgId:"",
			patientStatus:2,
		}
	],
	tempData:[]
})
const clearform=()=>{
	
	patientForm.userName="";
	patientForm.userSex="";
	patientForm.userBirthday="";
	patientForm.userAge="";
	patientForm.userCard="";
	patientForm.socialNum="";
	patientForm.patientType="";
	patientForm.visitNum="";
	patientForm.userTel="";
	patientForm.userAddr="";
	patientForm.registerDept="";
	patientForm.outpatientType="";
	patientForm.seeDoctor="";
	patientForm.costMoney="";
	patientForm.viewState="";
	patientForm.startCase="";
}
const loginRules = ref({
	userName: [{ required: true, message: t('required'), trigger: 'blur' }],
	userSex: [{ required: true, message: t('required'), trigger: 'blur' }],
	userBirthday: [{ required: true, message: t('required'), trigger: 'blur' }],
	userAge: [{ required: true, message: t('required'), trigger: 'blur' }],
	userCard: [{ required: true, message: t('required'), trigger: 'blur' }],
	socialNum: [{ required: true, message: t('required'), trigger: 'blur' }],
	userTel: [{ required: true, message: t('required'), trigger: 'blur' }],
	userAddr: [{ required: true, message: t('required'), trigger: 'blur' }],
	registerDept: [{ required: true, message: t('required'), trigger: 'blur' }],
	outpatientType: [{ required: true, message: t('required'), trigger: 'blur' }],
	seeDoctor: [{ required: true, message: t('required'), trigger: 'blur' }],
	costMoney: [{ required: true, message: t('required'), trigger: 'blur' }],
	viewState: [{ required: true, message: t('required'), trigger: 'blur' }],
	startCase: [{ required: true, message: t('required'), trigger: 'blur' }]
})
const patientRef = ref()
const addPatientHandle = () => {
	patientRef.value.init();
}
const goodRef = ref()
const addGoodHandle = () => {
	goodRef.value.init();
}
const projectRef = ref()
const addProjectHandle = () => {
	projectRef.value.init();
}

const listUserRef = ref()
const addUserHandle = () => {
	listUserRef.value.init();
}
const fatherUserMethod=(realName:any,uid:any)=>{
	patientForm.doctorName=realName;
	patientForm.doctorId=uid;
}
const fatherGoodMethod=(obj:any)=>{
	let dataArr:any=[];
	patientForm.tempData=obj;
	for(let index=0;index<obj.length;index++){
		dataArr[index]={
			"goodName":obj[index].goodName,
			"goodPrice":obj[index].goodPrice,
			"goodSource":obj[index].goodSource,
			"goodSpec":obj[index].goodSpec,
			"goodTime":obj[index].goodTime,
			"goodType":obj[index].goodType,
			"goodUnit":obj[index].goodUnit,
			"orgId":obj[index].orgId,
			"goodCount":1,
			"salePrice":obj[index].salePrice,
			"timeArea":obj[index].timeArea,
			"goodId":obj[index].goodId,
			"parentId":obj[index].parentId,
			"patientStatus":2,
			"patientId":patientForm.patientId,
			"totalPrice":obj[index].totalPrice/obj[index].goodCount
		};
	}
	patientForm.dataList=dataArr;
}
const fatherProjectMethod=(obj:any)=>{
	let dataArr:any=[];
	for(let index=0;index<obj.length;index++){
		dataArr[index]={
			"projectId":obj[index].uid,
			"projectCode":obj[index].projectCode,
			"projectName":obj[index].projectName,
			"projectPrice":obj[index].projectPrice,
			"orgId":obj[index].orgId,
			"patientStatus":2,
			"patientId":patientForm.patientId
		};
	}
	patientForm.projectList=dataArr;
}
const changePrice=(row:any)=>{
	let array:any=patientForm.tempData;
	for(var index=0;index<array.length;index++){
		if(row.goodId==array[index].goodId){
			if(row.goodCount>array[index].goodCount){
				ElMessage.error({
					message: '库存不足',
					duration: 500
				})
				row.goodCount=array[index].goodCount;
			}else{
				row.totalPrice=(row.goodCount*row.salePrice).toFixed(2);
			}
		}
	}
}
const fatherPatientMethod=(row:any)=>{
	patientForm.userName=row.userName;
	patientForm.userSex=row.userSex;
	patientForm.userBirthday=row.userBirthday;
	patientForm.userAge=row.userAge;
	patientForm.userCard=row.userCard;
	patientForm.socialNum=row.socialNum;
	patientForm.patientType=row.patientType;
	patientForm.visitNum=row.visitNum;
	patientForm.userTel=row.userTel;
	patientForm.userAddr=row.userAddr;
	patientForm.registerDept=row.registerDept;
	patientForm.outpatientType=row.outpatientType;
	patientForm.seeDoctor=row.seeDoctor;
	patientForm.costMoney=row.costMoney;
	patientForm.viewState=row.viewState;
	patientForm.startCase=row.startCase;
	patientForm.orgId=row.orgId;
	patientForm.doctorId=row.doctorId;
	patientForm.uid=row.uid;
	patientForm.patientId=row.uid;
}
// 提交药品
const submitDrug = () => {
	if(patientForm.patientId==""||patientForm.patientId==null){
		ElMessage.error({
			message: '请选择患者',
			duration: 500
		})
		return;
	}
	usePatientDrugSubmitApi(patientForm.dataList).then(() => {
		ElMessage.success({
			message: '操作成功',
			duration: 500
		})
		patientForm.dataList=[];
	})
}
// 提交项目
const submitProject = () => {
	if(patientForm.patientId==""||patientForm.patientId==null){
		ElMessage.error({
			message: '请选择项目',
			duration: 500
		})
		return;
	}
	usePatientProjectSubmitApi(patientForm.projectList).then(() => {
		ElMessage.success({
			message: '操作成功',
			duration: 500
		})
		patientForm.projectList=[];
	})
}
// 表单提交
const submitHandle = () => {
	let orgCd:any=localStorage.getItem('org');
	patientForm.orgId=orgCd;
	patientFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		usePatientRecordSubmitApi(patientForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500
			})
			clearform();
		})
	})
}
</script>

<style lang="scss" scoped>
.divline {
	width: 96%;
	height: 30px;
	float: left;
	margin-top: 20px;
}
.divline-btn{

	width: 300px;
	height: 30px;
	float: right;
	text-align: center;
    margin-right: 9%;
}
.divline-button{
	width: 96%;
	height: 30px;
	margin: 0px auto;
}
.divlinespac{
	
	width: 96%;
	height: 30px;
	float: left;
}
.divlineleft{
	width: 23%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divlinecol{
	width: 47%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divlinecolt{
	width: 71%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divtext{
	width: 100%;
	height: 30px;
	float: left;
	padding-left: 10px;
	font-weight: bold;
}
.divhr{
	width: 95%;
	height: 0.5px;
	background-color: #409Eff;
	float: left;
}
.divline-button-left {
	width: 60px;
	height: 30px;
	float: left;
    margin-top: -20px;
    margin-left: 52%;
	:deep(.el-button--primary) {
		margin-top: 14px;
		width: 100px;
		height: 30px;
		font-size: 13px;
	}
}
.divline-button-right {
	width: 60px;
	height: 30px;
	float: left;
	margin-left: 20px;
    margin-top: -20px;
	:deep(.el-button--primary) {
		margin-top: 14px;
		background-color: red;
		width: 100px;
		height: 30px;
		font-size: 13px;
		border: 0px;
	}
}
.divinfo{
	width: 100px;
	height: 30px;
	float: left;
}
.do-tabs{
	margin-top: -10px;
}
</style>
